<template>
    <div style="position:relative;" class="container">
        <h3>基原管理</h3>
        <!--
        <div v-for="(item,index) in tableData" :key="index" class="classify" @click="targetclassify(item.id)">
            <img :src="item.displayImg" class="oneclassify" alt="">
            <div class="oneclassifyname">{{item.name}}</div>
        </div>
        <div class="lower">
            <div v-for="(item,index) in lowerlist" :key="index" class="classify">
                <img :src=" item.img" class="oneclassify1" alt=""  @click="targetlower(item.id)">

                <el-checkbox v-model="item.checked" @change="get(item)">{{item.name}}</el-checkbox>
            </div>
        </div> -->
		<div class="container">
			<div style="position: relative;">
				<div style="margin-bottom:20px;">
					<el-input v-model="searchName" style="width:200px;"></el-input>
					<el-button type="primary" icon="el-icon-search" style="margin-left:10px;" @click="handleSearch">搜索</el-button>
				</div>

				<!-- <div style="position: absolute;right:0;top:0;" v-if="fen">
					 <router-link to="/modelbase/addedzw"><el-button type="primary" class="addedshebei">增加作物</el-button></router-link>
				</div> -->
			</div>
		    <div v-for="(item,index) in tableData" :key="index" class="classify" @click="targetclassify(item.id,index)">
				<!-- <img :src="item.clickImg" v-if="ifshow == index" class="oneclassify" alt=""> -->
		        <img :src="item.displayImg"  class="oneclassify" :class="{isActive:ifshow==index}" alt="">
		        <div class="oneclassifyname">{{item.name}}</div>
		    </div>

			<div class="lower">
				<div style="display: block;">
					 <div v-for="(item,index) in lowerlist1" :key="index" class="classify" >
						<img :src="item.img" class="oneclassify1" alt="" @click="targetlower(item.id)">
						<!-- <el-checkbox v-model="item.checked" @change="get(item)">{{item.name}}</el-checkbox> -->
						<el-checkbox-group v-model="checkedlist">
							<el-checkbox :label="item.id"  @change="get(item)">{{item.name}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
			</div>
			<div>
				<div v-for="(item,zindex) in list" :key="zindex" style ="margin:20px;">
					<div class="lu hnk"></div><div class="hnk jgxx">{{item.name}}</div>
					<div>
						<div v-for="(s,index) in item.modelClassifyList" :key="index" class="classify" >
							<img :src="s.img" class="oneclassify1" alt="" @click="targetlower(s.id)">
							<el-checkbox-group v-model="checkedlist">
								<el-checkbox :label="s.id"  @change="get(s)" style="overflow: hidden;width:70px;">{{s.name}}</el-checkbox>
							</el-checkbox-group>

						</div>
					</div>

				</div>
			</div>
		</div>
        <!-- <div class="newadd" >
             <router-link to="/basesource/addzw"><el-button type="primary" v-if="!addeds" class="addedshebei">增加作物</el-button></router-link>
        </div> -->


    </div>
</template>

<script>
	import axios from "axios"
    import {model_crop_search,model_category_tree,model_crop_load_category,model_crop_bindone,model_crop_loadbind,} from "@/request/api"
export default {

    data() {
        return {
			checkedlist:[],
			list:[],
            lowerlist:[
                1
            ],
			ifshow:0,
			lowerlist1:[],
            status:'一级分类',
            form:'',
            radio:'1',
            fen:true,
            fen1:false,
            activeName: 'first',
            name:'',
            editVisible:false,
            editVisible1:false,
            tableData: [],
            id:'',
            type:'',
            baselist:[],
            addeds:true,
			searchName:'',
			bind:0,
			ids:''
        }
    },
    methods:{
		binds(){

		},

        get(ele){
			console.log(ele)
			console.log(ele.checked)
			if(ele.checked == false ){
				this.bind =1
				let data = {
					modelCropId:ele.id,
					bind:this.bind
				}
				model_crop_bindone(data).then((res)=>{
					// this.getshuju()
					ele.checked = true
				})
			}else{
				this.bind = 0
				let data = {
					modelCropId:ele.id,
					bind:this.bind
				}
				model_crop_bindone(data).then((res)=>{
					// this.getshuju()
					ele.checked= false
				})
			}
        },
        init(){
			var companyid = localStorage.getItem("companyId")
			axios.get("http://47.108.220.160:90/jcApi/plant/control/modecategory/loadroot/company/" + companyid).then((res)=>{
				this.tableData = res.data
				if(this.tableData.length>0){
					this.targetclassify(this.tableData[0].id,0)
					this.ids = this.tableData[0].id
				}
				for(var i=0;i<this.tableData.length;i++){
					var ele = this.tableData[i]
					// this.tableData[i].displayImg = this.$store.state.imageUrls +  this.tableData[i].displayImg
					this.tableData[i].displayImg = this.$store.state.plantImg +  this.tableData[i].displayImg


				}
			})

        },
        targetlower(id){
            this.$router.push({
                path:'/basesource/cropcheck',
                query:{
                    id:id
                }
            })
        },
        targetclassify(id,index){
			this.ids = id
			this.ifshow = index
			this.lowerlist = []
			this.lowerlist1 = []
			axios.get("http://47.108.220.160:90/jcApi/plant/control/model/crop/getParentBind/" + id).then((res)=>{
			// model_crop_load_category(id).then((res)=>{
				this.lowerlist = res.data.data
				res.data.data.forEach(v => {
					v.checked = false

				});
				axios.get("http://47.108.220.160:90/jcApi/plant/model/crop/loadbind").then((res)=>{
				// model_crop_loadbind("").then((res)=>{
					this.baselist = res.data.data
					for(var x=0;x<this.baselist.length;x++){
						this.checkedlist.push(this.baselist[x].id)
					}
					// console.log(this.checkedlist)
					for(var i =0;i<this.lowerlist.length;i++){
						// console.log(this.lowerlist[i].checked)
						for (let s = 0; s < this.baselist.length; s++) {
							if(this.lowerlist[i].id == this.baselist[s].id){
								this.lowerlist[i].checked = true
							}
						}
					}

				})
				// console.log(this.tableData)
				this.list = this.tableData[index].children
				// console.log(this.tableData[index])
				for(var i=0;i<this.lowerlist.length;i++){
					this.lowerlist[i].img = 'http://47.108.220.160:90/jcApi/plant/file/show/' + this.lowerlist[i].img + "?ys=1"
					for(var k=0;k<this.tableData.length;k++){
						if(this.lowerlist[i].categoryId == this.tableData[k].id){
							this.lowerlist1.push(this.lowerlist[i])
						}
					}
				}

				for(var s=0;s<this.list.length;s++){
					this.list[s].modelClassifyList = []
					for(var r=0;r<this.lowerlist.length;r++){
						if(this.lowerlist[r].categoryId == this.list[s].id){
							this.list[s].modelClassifyList.push(this.lowerlist[r])
						}

					}
				}

			console.log(list)

			})



        },
        handleamend(index,row){
            this.$router.push({
                path:'/modelbase/amend',
                query:{
                    id:row.id
                }
            })
        },
        handleSearch(){
            let data = {
				categoryId:this.ids,
            	name:this.searchName
            }
            model_crop_search(data).then((res)=>{
            	this.lowerlist1 = res.data
            	// this.ifshow = -1
				res.data.forEach(v => {
					v.checked = false
				});
            	for(var i=0;i<this.lowerlist1.length;i++){
            		this.lowerlist1[i].img = 'http://47.108.220.160:90/jcApi/plant/file/show/' + this.lowerlist1[i].img
					for (let s = 0; s < this.baselist.length; s++) {
					 	if(this.lowerlist1[i].id == this.baselist[s].id){
					 		this.lowerlist1[i].checked = true
					 	}
					}
            	}
            	this.list = ""
            })
        },
        handleClick(){
            if(this.activeName == "first"){
                this.fen = true
                this.fen1 = false
            }
            if(this.activeName == "second"){
                this.fen = false
                this.fen1 = true
            }
        },
        added(index,row){
            this.$router.push({path:'/modelbase/added'})
        },
        handleremove(index,row){
            this.type = row.type
            this.id = row.id
            if(row.type == "一级分类"){
                this.editVisible = true
            }
            if(row.type == "二级分类"){
                this.editVisible1 = true
            }
        },

        getshuju(){
			model_category_tree("").then((res)=>{
				this.tableData = res.data
				if(this.tableData.length>0){
					this.targetclassify(this.tableData[0].id,0)
					this.ids = this.tableData[0].id
				}
				for(var i=0;i<this.tableData.length;i++){
					var ele = this.tableData[i]
					// this.tableData[i].displayImg = this.$store.state.imageUrls +  this.tableData[i].displayImg
					this.tableData[i].displayImg = this.$store.state.plantImg +  this.tableData[i].displayImg


				}
			})
			// let companyId = localStorage.getItem("companyId")
			// let userType = localStorage.getItem("userType")
			// let data = {
			// 	companyId:companyId,
			// 	userType:userType
			// }
   //          var that = this
   //          model_findByOne(data).then((res)=>{
   //              this.tableData = res.data
			// 	if(this.tableData.length>0){
			// 		this.targetclassify(this.tableData[0].id)
			// 	}
   //              for(var i=0;i<this.tableData.length;i++){
   //                  var ele = this.tableData[i]
   //                  this.tableData[i].displayImg = this.$store.state.imageUrls +  this.tableData[i].displayImg
			// 		 this.tableData[i].clickImg = this.$store.state.imageUrls +  this.tableData[i].clickImg
   //                  if(ele.type == "0"){
   //                      ele.type = "一级分类"
   //                      this.tjxianshi = true
   //                  }
   //                  if(ele.type == "1"){
   //                      ele.type = "二级分类"
   //                      this.tjxianshi = false
   //                  }

   //              }

   //          })
   //          .catch((res)=>{
   //              console.log(res)
   //          })
        },

        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
			type.map((item1) => {
				if (item1.name == '基原管理' && item1.children != null) {
					for (var i = 0; i < item1.children.length; i++) {
						if (item1.children[i].name == '新增') this.addeds = false;
					}
				}
			});
        }
    },
    mounted(){
        // this.getshuju();
        this.judgmentAuthority()
     this.init()
    }

};
</script>

<style scoped>
	.isActive{
		display:block; margin:0 auto;
		position:relative;
		filter: drop-shadow(0px 0 yellow);
		/* transform: translate(-39px, 0); */
		overflow:hidden;
	}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.reds{
    color: red;
}
.sousuo{
    position: absolute;
    top:30px;
    left:180px;
}
.newadd{
    position: absolute;
    right:20px;
    top:30px;
}
.oneclassify{
    width:70px;
    height:70px;
}
.oneclassify1{
    width:70px;
    height:70px;
    border-radius:50%;
}
.oneclassifyname{
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.classify{
    width:70px;
    display:inline-block;
    margin:10px;
}
 .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
</style>
